<template>
	<div>
		<div class="temp-link clearfix">
			<a href="javascript:;" v-for="item in tabData" @click="selectTab(item.tab_item)" :class="{active:currentView==item.tab_item}">{{ item.title }}</a>
		</div>
		<transition name="fade" mode="out-in"><component :is="currentView"></component></transition>
	</div>
</template>

<script>
	import AnalysisCom from './AnalysisCom.vue'
	import PlanCom from './PlanCom.vue'
	import LifeCom from './LifeCom.vue'
	export default {
		components: {
			AnalysisCom,
			PlanCom,
			LifeCom
		},
		data(){
			return {
				currentView: 'AnalysisCom',
				tabData: [
					{ title: '疾病分析及管理目标', tab_item: 'AnalysisCom' },
					{ title: '干预计划', tab_item: 'PlanCom' },
					{ title: '生活方式及改善计划', tab_item: 'LifeCom' }
				]
			}
		},
		methods: {
			selectTab(tab){
				this.currentView = tab;
			}
		}
	}
</script>

<style lang="less" scoped>
	.temp-link {
	  border-bottom: 1px solid #dddee1;
	  margin-bottom: 24px;
	
	  a {
	    float: left;
	    padding: 0 20px;
	    height: 60px;
	    color: #495060;
	    line-height: 60px;
	    border-bottom: 2px solid transparent;
	    margin-bottom: -1px;
	
	    &:hover,
	    &.active {
	      border-bottom-color: #0b9595;
	    }
	  }
}
</style>